<template>
<div>
  <canvas id="myCanvas"  @mousemove="touchmove" style="border:1px solid #d3d3d3;width: 800px;height: 300px"></canvas>
</div>
</template>

<script>
export default {
  name: "ButtonCuba",
  mounted() {

  },
  methods:{
    initCanvas(mark){

      var c=document.getElementById("myCanvas");
      var result=mark/c.width;
      if(result>=1){
        result=0.99999
      }
      if(result<=0){
        result=0.00001
      }
      var ctx=c.getContext("2d");
      var grd=ctx.createLinearGradient(-100,0,c.width+150,0);
      grd.addColorStop(0,"red");
      grd.addColorStop(0.000001,"red");
      grd.addColorStop(0.000002,"red");
      grd.addColorStop(result,"black");
      grd.addColorStop(0.999997,"red");
      grd.addColorStop(0.999998,"red");
      grd.addColorStop(0.999999,"red");
      grd.addColorStop(1.0,"red");

      ctx.fillStyle=grd;
      ctx.fillRect(0,0,c.width,c.height);
    },
    touchmove(e) {
      this.initCanvas(e.offsetX);
      console.log('touchmove')
    }
  }
}
</script>

<style scoped>

</style>